<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            display: flex;
            justify-content: space-evenly;
            margin: 0;
            padding: 0;
            margin: 100px auto;
            flex-wrap: wrap;
        }

        ul li {
            list-style: none;
            border: 1px solid #ccc;
            padding: 30px;
            box-shadow: 0px 0px 5px 0px #000;

        }
    </style>
</head>

<body>
    <button id="jiage">按价格排序</button>
    <button id="xiaoliang">按销量排序</button>
    <button id="pingjia">评价排序</button>
    <ul id="s">

        <!-- <img src="img/ip7.jpg" alt="">
            <h1>颜色：黑色</h1>
            <p>原价3892</p>
            <p>现价</p>
            <p>销量</p>
            <p>评价</p> -->


    </ul>
<ul id="u"></ul>
<ul id="v"></ul>
</body>
<script>
    var data = [{
        id: '001',
        name: 'iphone7 plugs',
        imgurl: 'img/ip7.jpg',
        price: 5899.00,
        sale: 5888.00,
        color: '土豪金',
        evaluate: 288,
        sales: 1230
    }, {
        id: '002',
        name: 'Note7',
        imgurl: 'img/note7.jpg',
        price: 3899.00,
        sale: 998.00,
        color: '黑色',
        evaluate: 289,
        sales: 439
    }, {
        id: '003',
        name: '荣耀7',
        imgurl: 'img/honor7.jpg',
        price: 1999.00,
        sale: 1899.00,
        color: '白色',
        evaluate: 438,
        sales: 908
    }, {
        id: '004',
        name: 'iphone7 plugs',
        imgurl: 'img/ip7.jpg',
        price: 5999.00,
        sale: 5808.00,
        color: '土豪金',
        evaluate: 223,
        sales: 986
    }, {
        id: '005',
        name: 'Note7',
        imgurl: 'img/note7.jpg',
        price: 3892.00,
        sale: 998.00,
        color: '黑色',
        evaluate: 88,
        sales: 8798
    }, {
        id: '006',
        name: '荣耀7',
        imgurl: 'img/honor7.jpg',
        price: 1929.00,
        sale: 1099.00,
        color: '白色',
        evaluate: 2088,
        sales: 453
    }, {
        id: '007',
        name: 'iphone7 plugs',
        imgurl: 'img/ip7.jpg',
        price: 4899.00,
        sale: 2888.00,
        color: '土豪金',
        evaluate: 2880,
        sales: 88
    }, {
        id: '008',
        name: 'Note7',
        imgurl: 'img/note7.jpg',
        price: 5876.00,
        sale: 998.00,
        color: '黑色',
        evaluate: 3288,
        sales: 99
    }, {
        id: '009',
        name: '荣耀7',
        imgurl: 'img/honor7.jpg',
        price: 4999.00,
        sale: 1899.00,
        color: '白色',
        evaluate: 1288,
        sales: 645
    }, {
        id: '010',
        name: 'iphone7 plugs',
        imgurl: 'img/ip7.jpg',
        price: 5888.00,
        sale: 2899.00,
        color: '土豪金',
        evaluate: 2288,
        sales: 34
    }, {
        id: '011',
        name: 'Note7',
        imgurl: 'img/note7.jpg',
        price: 3299.00,
        sale: 978.00,
        color: '黑色',
        evaluate: 28,
        sales: 1213
    }, {
        id: '012',
        name: '荣耀7',
        imgurl: 'img/honor7.jpg',
        price: 1976.00,
        sale: 1899.00,
        color: '白色',
        evaluate: 3243,
        sales: 123
    }];

    for (i = 0; i < data.length; i++) {
        s.innerHTML += "<li>" +
            "<img src=" + data[i].imgurl + ">" +
            "<h1>" +"颜色:"+ data[i].color + "</h1>" +
            "<p>" +"原价:"+ data[i].price + "</p>" +
            "<p>" + "售价:"+data[i].sale + "</p>" +
            "<p>" +"销量:"+data[i].sales + "</p>" +
            "<p>" + "评论:"+data[i].evaluate + "</p>" +
            "</li>"

    }


    jiage.onclick = function () {
// 点击后清空ul上的内容先
// 然后在把内容加回到ul上
// 同样的套路用在三个按钮上
        s.innerHTML=""
        var t = data.sort(function (a, b) {
            return b.sale - a.sale
        })
        for (var j = 0; j < t.length; j++) {
            s.innerHTML += "<li>" +
                "<img src=" + t[j].imgurl + ">" +
                "<h1>" +"颜色:"+ t[j].color + "</h1>" +
                "<p>" +"原价:"+ t[j].price + "</p>" +
                "<p>" +"售价:"+ t[j].sale + "</p>" +
                "<p>" + "销量:"+t[j].sales + "</p>" +
                "<p>" + "评论:"+ t[j].evaluate + "</p>" +
                "</li>"
        }

    }



        xiaoliang.onclick=function () {
s.innerHTML=""
            var w = data.sort(function (a, b) {
                return b.sales - a.sales
            })
            for (var j = 0; j < w.length; j++) {
            s.innerHTML += "<li>" +
                "<img src=" + w[j].imgurl + ">" +
                "<h1>" +"颜色:"+ w[j].color + "</h1>" +
                "<p>" +"原价:"+ w[j].price + "</p>" +
                "<p>" +"售价:"+ w[j].sale + "</p>" +
                "<p>" + "销量:"+w[j].sales + "</p>" +
                "<p>" + "评论:"+ w[j].evaluate + "</p>" +
                "</li>"
        }

        }

        pingjia.onclick=function () {
            s.innerHTML=""
    var q = data.sort(function (a, b) {
        return b.evaluate - a.evaluate
    })

    for (var j = 0; j < q.length; j++) {
            s.innerHTML += "<li>" +
                "<img src=" + q[j].imgurl + ">" +
                "<h1>" +"颜色:"+ q[j].color + "</h1>" +
                "<p>" +"原价:"+ q[j].price + "</p>" +
                "<p>" +"售价:"+ q[j].sale + "</p>" +
                "<p>" + "销量:"+q[j].sales + "</p>" +
                "<p>" + "评论:"+ q[j].evaluate + "</p>" +
                "</li>"
        }
    }
</script>

</html>